<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        <p></p>
        <p class="a"></p>
        <p>
            <span class="a"></span>
        </p>
        <span></span>
    </div>

    <script>
        function GetEle(ele) {
            // 获取所有的元素
            this.eles = document.querySelectorAll(ele);
        }


        // $符号就是实例化对象   省略每一次的new
        function $(ele) {
            return new GetEle(ele)
        }


        GetEle.prototype.parent = function () {
            this.eles = this.eles[0].parentElement;
        }



        // $('div').children('p.a');
        GetEle.prototype.children = function () {
            // 判断是否有参数
            if (arguments.length > 0) {
                // 找到所有的儿子
                const c = this.eles[0].children;   // 伪数组
                const arr1 = Array.from(c);

                // 找到所有的子元素(包含了孙子)
                const oPs = this.eles[0].querySelectorAll(arguments[0]);
                const arr2 = [...oPs];

                // 找到所有子元素中是儿子的那一部分
                const arr = [];
                for (let i in arr2) {
                    // 判断子元素是否在儿子中存在
                    if (arr1.includes(arr2[i])) {
                        arr.push(arr2[i])
                    }
                }

                // return arr
                this.eles = arr;
            } else {
                this.eles = this.eles[0].children;
            }

        }


        // // 所有的祖先元素
        // GetEle.prototype.parents = function () {


        //     if (arguments.length > 0) {
        //         // 不断的寻找父元素  this.eles[0].parentElement   递归
        //         const arr = [];
        //         // 分析
        //         // const p = this.eles[0].parentElement;
        //         // arr.push(p);

        //         // const p2 = p.parentElement;
        //         // arr.push(p2);

        //         const p1 = document.querySelector(arguments[0]);

        //         function fn(ele) {
        //             if (ele.parentElement === p1.parentElement) {
        //                 return
        //             }
        //             if (ele.parentElement) {
        //                 const p = ele.parentElement;
        //                 arr.push(p);
        //                 fn(p);
        //             }
        //         }

        //         fn(this.eles[0]);
        //         console.log(arr);
        //     } else {
        //         // 不断的寻找父元素  this.eles[0].parentElement   递归
        //         const arr = [];
        //         // 分析
        //         // const p = this.eles[0].parentElement;
        //         // arr.push(p);

        //         // const p2 = p.parentElement;
        //         // arr.push(p2);

        //         function fn(ele) {
        //             if (ele.parentElement) {
        //                 const p = ele.parentElement;
        //                 arr.push(p);
        //                 fn(p);
        //             }
        //         }

        //         fn(this.eles[0]);
        //         this.eles = arr;
        //     }
        // }


        // 所有的祖先元素
        GetEle.prototype.parents = function () {
            const arr = [];

            // ele 谁的父元素
            // p  截止的位置
            function fn(ele, p) {

                if (p && ele.parentElement === p.parentElement) {
                    return
                }

                if (ele.parentElement) {
                    const p2 = ele.parentElement;
                    arr.push(p2);
                    // 只要一个参数
                    // if (p) {
                    //     fn(p2, p)
                    // } else {
                    //     fn(p2)
                    // }

                    // p ? fn(p2 , p) : fn(p2) ;

                    fn(p2, p);
                }


            }

            if (arguments.length > 0) {
                const p1 = document.querySelector(arguments[0]);
                fn(this.eles[0], p1);

            } else {
                fn(this.eles[0]);
                this.eles = arr;

            }

            this.eles = arr;
        }


        $('p').parents(undefined);

        $('p').parents('body');





        // const arr = [1, 2, 3, 4, 5, 6];

        // const arr2 = [2, 3, 9];


        // const arr3 = [];
        // for (let i in arr2) {
        //     if (arr.includes(arr2[i])) {
        //         arr3.push(arr2[i])
        //     }
        // }

        // console.log(arr3)

    </script>
</body>

</html>